import React, { useState, useEffect } from "react";
import { Row, Col, Input, Select, Button, message, Space, Spin,Drawer } from "antd";
import ReactJson from 'react-json-view'
import { _dataNer } from "../utils/api";

import "./index.css";

const { Option } = Select;
const { TextArea } = Input;
const DataType = [
  { data_id: 1, data_name: "数据1" },
  { data_id: 2, data_name: "数据2" },
];
const ModalType = [
  { model_id: 1, modal_name: "模型A" },
  { model_id: 2, modal_name: "模型B" },
  { model_id: 3, modal_name: "模型C" },
  { model_id: 4, modal_name: "模型D" },
  { model_id: 5, modal_name: "模型E" },
];

function AddArticle(props) {
  const [articleContent, setArticleContent] = useState(""); 
  const [markdownContent, setMarkdownContent] = useState("预览结果"); 
  const [selectedDataType, setSelectDataType] = useState(); 
  const [selectedMType, setSelectMType] = useState(); 
  const [isLoading, setIsLoading] = useState(false); 
  const [visible, setVisible] = useState(false);
  const [myJson, setmyJson] = useState();

  useEffect(() => {}, []);

  const changeContent = (e) => {
    setArticleContent(e.target.value);
  };

  const selectMTypeHandler = (value) => {
    setSelectMType(value);
  };
  const selectDataTypeHandler = (value) => {
    setSelectDataType(value);
  };
  const saveArticle = () => {
    // markedContent();

    if (!selectedDataType) {
      message.warning("请选择数据类别");
      return false;
    }  else if (!articleContent) {
      message.info("数据内容不能为空");
      return false;
    }

    let dataProps = {};
    dataProps.data_id = selectedDataType;
    dataProps.model_id = 1;
    dataProps.articleContent = articleContent;

    // console.log( '请求参数',dataProps);

    setIsLoading(true);
    _dataNer(dataProps)
      .then((res) => {
        if (res.status === 200) {
          console.log("后端返回数据：", res.data);
          setmyJson(res.data)
          message.success("数据标识成功");
          setIsLoading(false);
          let data = res.data
          let str = "";
          let len = articleContent.length;
          let i, j, k;
          for (i = 0; i < len; i++) {
            str += articleContent[i];
            for (j = 0; j < data.length; j++) {
              if (i + 1 == parseInt(data[j].start)) {
                str += ` <Tooltip title="prompt text"><span 
          onclick=javascript:{alert('实体：${data[j].type}')} style='color:${data[j].color};background:${data[j].background}'>`;
                for (
                  k = parseInt(data[j].start);
                  k <= parseInt(data[j].end);
                  k++
                ) {
                  str += articleContent[k];
                }
                str += `</span ></Tooltip> `;
                i = k - 1;
              }
            }
          }
          // console.log(str);
          // setArticleContent(str)
          setMarkdownContent(str);
        }
      })
      .catch(() => {
        message.error("服务器错误");
        setIsLoading(false);
      });
  };
  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
    // setmyJson()
  };
  return (
    <div>
      <Spin tip="Loading..." spinning={isLoading}>
        <Row type="flex" justify="center">
          <Col span={23}>
            <div className="admin-body" style={{ padding: 24, minHeight: 360 }}>
              <Row gutter={5}>
                <Col span={24}>
                  <Row>
                    <Col span={4}>
                      <Space direction="horizontal">
                        <Select
                          size="large"
                          placeholder="数据类型"
                          onChange={selectDataTypeHandler}
                          defaultValue={setSelectDataType}
                        >
                          {DataType.map((v) => (
                            <Option value={v.data_id}>{v.data_name}</Option>
                          ))}
                        </Select>
                        {/* <Select
                          size="large"
                          placeholder="模型类型"
                          onChange={selectMTypeHandler}
                          defaultValue={setSelectMType}
                        >
                          {ModalType.map((v) => (
                            <Option value={v.model_id} key={v.model_id}>
                              {v.modal_name}
                            </Option>
                          ))}
                        </Select> */}
                      </Space>
                    </Col>
                    <Col span={3}>
                    <Button
                        type="primary"
                        size="large"
                        onClick={saveArticle}
                        block
                      >
                        标识
                      </Button>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={3}>
                      <Button
                        type="primary"
                        size="large"
                        onClick={showDrawer}
                        block
                      >
                        数据展示
                      </Button>
                    </Col>
                  </Row>
                  <br />
                  <Row gutter={10}>
                    <Col span={12}>
                      <TextArea
                        className="markdown-content"
                        rows={35}
                        placeholder="数据内容"
                        value={articleContent}
                        onChange={changeContent}
                        allowClear
                        maxLength={512}
                        showCount maxLength={512}
                      />
                    </Col>
                    <Col span={12}>
                      <div
                        className="show-html"
                        dangerouslySetInnerHTML={{ __html: markdownContent }}
                      >
                        {/* {markdownContent} */}
                      </div>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
        <Drawer
        title="数据展示"
        placement="right"
        closable={false}
        onClose={onClose}
        visible={visible}
        width={640}
      >
       <ReactJson src={myJson} />
      </Drawer>
      </Spin>
    </div>
  );
}

export default AddArticle;
